define(window.backboneCommon.getViewDefine("creative.modalList"), function ($,require,Collection,tpl) {
    var defaultsOptions={
        campaignId:"",
        submitCallback:null
    };
    var pagePrivate = {
        getDefaults :function () {
            return defaultsOptions
        },
        getOptions : function (options) {
            options=$.ExtCommon.isCheckEmpty(options)?{}:options;
            return $.ExtCommon.initMergeJson(this.getDefaults(),options);
        }
    };
    var backboneView= Backbone.View.extend({
        events: {
            "click #tb_modal_listCreative .rd-one:radio": "selectOneRadio",
            "click #tags_selectCreative .close": "removeOneTag",
            "click #submit_modal_creative": "saveSubmit"
        },
        initialize: function () {
            this.listenTo(this.model, 'bind:ModalList', this.bindList);
            this.render();
        },
        render:function(){
            var templateHtml=_.template(tpl);
            this.$el.html(templateHtml());
            return this;
        },
        initMain:function(options){
            this.elementModel={
                tags:$('#tags_selectCreative'),
                table:$("#tb_modal_listCreative"),
                modal:$('#modal_creative')
            };
            this.extObject={};
            this.pageData={initPage:false};
            this.pageOptions=$.ExtCommon.initMergeJson(pagePrivate.getOptions(),options);
            this._initInputSearch();
        },
        initPage:function (data,options) {
            data=$.ExtCommon.isCheckEmpty(data)?[]:data;
            options=$.ExtCommon.isCheckEmpty(options)?{}:options;
            this.pageData.dataSelect=data;
            this.pageOptions=$.ExtCommon.initMergeJson(this.pageOptions,options);
            this.elementModel.tags.html("");
            if(!this.pageData.initPage){
                this.pageData.initPage=true;
                this._initPageList();
            }else{
                this.extObject.inputSearch.setValue("");
                this.refreshList();
            }
            this._bindSelectTags(this.pageData.dataSelect,true);
            this._showModal();
        },
        _initInputSearch:function () {
            var self=this;
            self.extObject.inputSearch=$("#panel_inputSearch_creative").ExtInputSearch({
                placeholder:"创意ID,创意名称",
                searchCallback:function () {
                    self.refreshList();
                }
            })
        },
        _initPageList: function () {
            var self=this;
            self.extObject.table=self.elementModel.table.ExtDataTable({
                pageLength: 5,
                columns: [
                    {data: null, class: "w-20"},
                    {data: "id", class: "w-50"},
                    {data: "name", class: "w-min-100"},
                    {data: "statusName", class: "w-100"},
                    {data: "interactionType", class: "w-120"}
                ],
                infoExt:{
                    ajaxDataPara:function(){
                        var param= {};
                        param.campaignId=self.pageOptions.campaignId;
                        param.spreadId=self.pageOptions.spreadId;
                        param.spaceId=self.pageOptions.spaceId;
                        var keyword = self.extObject.inputSearch.getValue();
                        if (!$.ExtCommon.isCheckEmpty(keyword)) {param.search = keyword}
                        return param;
                    },
                    ajaxWholeCallback:function(param){
                        self.collection.getModalList(param)
                    },
                    trClickCallback:function(elementTr){
                        var elementCb =elementTr.find(":radio");
                        var rdValue = elementCb.prop("checked");
                        self.elementModel.table.find(".rd-one").prop("checked",false);
                        elementCb.prop("checked", !rdValue);
                        self._selectRadio(elementCb,!rdValue);
                    }
                },
                createdRow: function (row, data) {
                    var strChecked=!$.ExtCommon.isCheckEmpty(self.pageData.dataSelect) && data.id.toString()===self.pageData.dataSelect.id.toString() ?"checked='checked'":"";
                    $("td", row).eq(0).html($.ExtCommon.getStringConnect('<div class="radio radio-default tr-click-invalid h-20"><input id="rd_modal_creative_{0}" type="radio" class="rd-one" value="{0}" {1}><label for="rd_modal_creative_{0}"></label></div>',[data.id,strChecked]));
                },
                drawCallback: function () {}
            });
        },
        bindList:function(){
            var data=this.model.get("dataModalList");
            this.extObject.table.ajaxWholeRefreshData(data);
        },
        refreshList: function () {this.extObject.table.refresh()},

        selectOneRadio:function (e) {
            var element=$(e.currentTarget);
            this.elementModel.table.find(".rd-one").prop("checked",false);
            element.prop("checked", true);
            this._selectRadio(element,true);
        },
        removeOneTag:function (e) {
            var elTag=$(e.currentTarget);
            var id=elTag.data("tagId");
            elTag.parent().empty().remove();
            this.elementModel.table.find(".rd-one").prop("checked",false);
            this._bindSelectTags({id:id},false);
        },
        _selectRadio:function (element,checked) {
            var tr=element.parents("tr:first");
            var rowData =this.extObject.table.getRowInfo(tr).data();
            this._bindSelectTags(rowData,checked);
        },
        _bindSelectTags:function(json,isSelect){
            if(!$.ExtCommon.isCheckEmpty(json)) {
                isSelect = $.ExtCommon.isCheckEmpty(isSelect) ? true : isSelect;
                if (isSelect) {
                    var strHtml = $.ExtCommon.isCheckEmpty(json) ? "" :$.ExtCommon.getStringConnect('<span class="tag">{1}<button class="close" type="button" data-tag-id="{0}"><span>×</span></button></span>',[json.id,json.name]);
                    if (strHtml.length > 0) {
                        this.elementModel.tags.html(strHtml);
                        this.pageData.dataSelect = json;
                    }
                } else {
                    this.pageData.dataSelect={};
                    this.elementModel.tags.find("button[data-tag-id='" + json.id + "']").parent().empty().remove();
                }
            }
            if(this.elementModel.tags.children().length===0){
                this.elementModel.tags.parent().hide()
            }else{
                this.elementModel.tags.parent().show()
            }
        },

        _checkForm:function () {},
        saveSubmit:function () {
            this._hideModal();
            if(this.pageOptions.submitCallback){this.pageOptions.submitCallback(this.pageData.dataSelect)}
        },
        _showModal:function(){
            this.elementModel.modal.modal("show");
            $.ExtAssist.modal.computeTop(this.elementModel.modal);
        },
        _hideModal: function () {
            this.elementModel.modal.modal("hide");
        }
    });
    var viewModel=function(options){
        this.collection= new Collection();
        this.model=this.collection.model;
        this.view=new backboneView({el:options.pElement,collection:this.collection,model:this.model});
        this.view.initMain(options);
    };
    viewModel.prototype={
        init:function (data,options) {
            this.view.initPage(data,options);
        }
    };
    return viewModel;
});